import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Modal,
	Button,
} from 'antd';

const FormItem = Form.Item;

//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);
    this.state = {
        formVals: {
            dept_id: props.values.props.dataRef.dept_id,
            dept_name: props.values.props.dataRef.dept_name,
            dept_code: props.values.props.dataRef.dept_code,
            parentid: props.values.props.dataRef.parentid,
            title: props.values.props.dataRef.title,
        },
    };

}

renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical" hideRequiredMark>


			<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                <Col  md={12} sm={24}>
                <FormItem  label="部门名称">
                    {form.getFieldDecorator('title', {
                    rules: [{ required: false, message: '请输入至少五个字符的部门名称！', min: 5 }],
                    initialValue: formVals.title,
                    })(<Input readOnly placeholder="请输入" />)}
                </FormItem>
                </Col>
                <Col  md={12} sm={24}>
                <FormItem  label="部门代码">
                    {form.getFieldDecorator('dept_code', {
                    rules: [{ required: false, message: '请输入至少五个字符的部门code！', min: 5 }],
                    initialValue: formVals.dept_code,
                    })(<Input readOnly placeholder="请输入" />)}
                </FormItem>
                </Col>

            </Row>  

    </Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
	this.state = {
        formVals: {
            dept_id: values.props.dataRef.dept_id,
            dept_name: values.props.dataRef.dept_name,
            dept_code: values.props.dataRef.dept_code,
            parentid: values.props.dataRef.parentid,
            title: values.props.dataRef.title,
        },
    };
    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    footer={<Button key="back" onClick={ () => handleViewModalVisible(false, values) }>取消</Button>}
    onCancel={() => handleViewModalVisible(false, values)}
>

    {this.renderContent(this.state.formVals)}
</Modal>
);
}

}

export default ViewForm;